<template>
    <div>
      <base-dialog
        :visible="dialogVisible"
        title="修改密码"
        width="7rem"
        :footer="true"
        @handleDialogCancle="handleDialogCancle"
        @handleDialogSubmit="handleDialogSubmit"
      >
        <el-form
          ref="form"
          :model="model"
          label-width="100px"
          class="earlywarning-form"
          :rules="rules"
          label-position="left"
        >
          <el-row>
            <el-col>
              <el-form-item label="账号" prop="account">
                <!-- <el-input v-model="model.account" maxlength="20" placeholder="账号" readonly></el-input> -->
                <div>{{ name == "" ? userName : name }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="原密码" prop="currentPassword">
                <el-input
                  type="password"
                  autocomplete="off"
                  v-model="model.currentPassword"
                  maxlength="20"
                  placeholder="原密码"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="新密码" prop="newPassword">
                <el-input
                  type="password"
                  autocomplete="off"
                  v-model="model.newPassword"
                  maxlength="20"
                  placeholder="新密码"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="确认新密码" prop="checkNewPassword">
                <el-input
                  type="password"
                  autocomplete="off"
                  v-model="model.checkNewPassword"
                  maxlength="20"
                  placeholder="再次输入新密码"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </base-dialog>
    </div>
  </template>
      
  <script>
  import { mapGetters } from "vuex";
  import { changePassword, setIsLogin } from "@/api/user";
  
  export default {
    props: {
      dialogVisible: {
        type: Boolean,
        default: false,
      },
      name: {
        type: String,
        default: "",
      },
    },
    data() {
      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.model.newPassword) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        model: {
          currentPassword: null,
          newPassword: null,
          checkNewPassword: null,
        },
        rules: {
          currentPassword: [{ required: true, trigger: "blur", message: "必填" }],
          newPassword: [{ required: true, trigger: "blur", message: "必填" }],
          checkNewPassword: [
            { required: true, trigger: "blur", message: "必填" },
            { validator: validatePass2, trigger: "blur" },
          ],
        },
      };
    },
    watch: {},
    computed: {
      ...mapGetters(["sidebar", "avatar", "device", "userName"]),
    },
    mounted() {},
    destroyed() {},
    methods: {
      handleDialogCancle() {
        this.$refs["form"].resetFields();
        this.$emit("handleDialogCancle");
      },
      handleDialogSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.userName == "admin1") {
              this.$message({
                message: "管理员账号不可修改",
                type: "error",
              });
            } else {
              changePassword(this.model).then((res) => {
                // this.$emit("handleDialogSubmit", this.model);
                setIsLogin().then((res) => {
                  this.$notify({
                    title: "成功",
                    message: "修改成功",
                    type: "success",
                    duration: 2000,
                  });
                  this.$emit("handleDialogCancle");
                });
                // this.$alert("密码修改成功，将退出重新登录", "提示", {
                //     showClose: false,
                //     confirmButtonText: "确定",
                //     callback: async (action) => {
                //         await this.$store.dispatch('user/logout')
                //         this.$router.push(`/login?redirect=${this.$route.fullPath}`)
                //     },
                // });
              });
            }
          }
        });
      },
    },
  };
  </script>
        
  <style lang="scss" scoped></style>
          
      